<template>
	<div>
		<el-card>
			<el-form :model="state.pageParam.param" label-width="120" ref="queryFormRef" @keyup.enter.enter="loadList">
				<el-row :gutter="10">
					<el-col :xs="3" :sm="4" :md="6" :lg="8" :xl="8">
						<el-form-item prop="formCode" label="编号">
							<el-input v-model="state.pageParam.param.formCode" placeholder="编号" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="3" :sm="4" :md="6" :lg="8" :xl="8">
						<el-form-item prop="formName" label="名称">
							<el-input v-model="state.pageParam.param.formName" placeholder="名称" clearable> </el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="3" :sm="4" :md="6" :lg="8" :xl="8">
						<el-form-item prop="formType" label="表单类型">
							<DicSelect v-model="state.pageParam.param.formType" placeholder="请选择表单类型" dicCode="devFormType" style="width: 100%"></DicSelect>
						</el-form-item>
					</el-col>
					<el-col :xs="3" :sm="4" :md="6" :lg="8" :xl="8">
						<el-form-item prop="remark" label="备注">
							<el-input v-model="state.pageParam.param.remark" placeholder="备注" clearable> </el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div class="btnSearchStyle">
				<el-button type="primary" class="ml7" @click="loadList">
					<el-icon>
						<ele-Search />
					</el-icon>
					查询
				</el-button>
				<el-button type="primary" class="ml10" @click="reSetForm(queryFormRef)">
					<el-icon>
						<ele-Refresh />
					</el-icon>
					重置
				</el-button>
			</div>
		</el-card>
		<el-card>
			<el-table :data="state.dataList" style="width: 100%" ref="dataList_ref" @selection-change="handleSelectionChange">
				<el-table-column type="selection" width="55" />
				<el-table-column prop="formCode" header-align="center" align="center" label="编号" />
				<el-table-column prop="formName" header-align="center" align="center" label="名称" />
				<el-table-column prop="formType" header-align="center" align="center" label="表单类型" column-key="devFormType" :formatter="formatStatus" />
				<el-table-column prop="remark" header-align="center" align="center" label="备注" />
			</el-table>

			<el-pagination
				@size-change="onHandleSizeChange"
				@current-change="onHandleCurrentChange"
				:pager-count="5"
				:page-sizes="[10, 50, 200]"
				v-model:current-page="state.pageParam.page"
				background
				v-model:page-size="state.pageParam.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="state.total"
				small
			>
			</el-pagination>
		</el-card>
	</div>
</template>

<script setup lang="ts" name='ComponentList'>
import { ref, reactive, onMounted, defineExpose } from 'vue';
import { developApi } from '/@/api/sys/develop-api';
import { getDataDictionaryList } from '/@/utils/cacheDic';
import { ElMessage, ElMessageBox, FormInstance, ElLoading } from 'element-plus';
const dataList_ref = ref();
const queryFormRef = ref<FormInstance>();
const state = reactive({
	dataList: [] as any,
	pageParam: {
		page: 1,
		pageSize: 10,
		param: {
			id: '',
			version: '',
			formCode: '',
			formName: '',
			formType: '',
			remark: '',
			formDesJson: '',
		},
		selectList: [] as any,
	},
	total: 0,
	dataDictionaryList: [] as any,
	listLoading: false,
});

onMounted(() => {
	// 数据字典
	getDataDictionaryList(state.dataDictionaryList, ['devFormType']);
	// 列表查询
	loadList();
});

//重置
const reSetForm = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.resetFields();
	state.pageParam.page = 1;
	loadList();
};

const handleSelectionChange = (val: any) => {
	state.pageParam.selectList = val.map((item: any) => {
		return {
			componentId: item.id,
			componentCode: item.formCode,
			detailFormJson: item.formDesJson,
		};
	});
};

// 分页改变
const onHandleSizeChange = (val: number) => {
	state.pageParam.pageSize = val;
	loadList();
};
// 分页改变
const onHandleCurrentChange = (val: number) => {
	state.pageParam.page = val;
	loadList();
};

const loadList = () => {
	state.listLoading = true;
	developApi
		.querySysFormDesignerListPage(state.pageParam)
		.then((data) => {
			if (data && data.code === 0) {
				state.dataList = data.data.records;
				state.total = data.data.totalRow;
			} else {
				state.dataList = [];
				state.total = 0;
			}
		})
		.catch(() => {})
		.finally(() => {
			state.listLoading = false;
		});
};

const formatStatus = (row: any, column: any, cellValue: string | number, index: number) => {
	if (Object.keys(state.dataDictionaryList).length > 0) {
		if (cellValue) {
			return state.dataDictionaryList[column.columnKey].get(cellValue);
		}
	}
};

defineExpose({
	dataList_ref,
	state,
});
</script>

<style lang="scss" scoped>
</style>